 
<template>
    <TitleInfo title="考试申请订单" />
    <el-table :data="orderData" border :header-cell-style="{ backgroundColor: '#345aa', color: '#ffffff', fontSize: '14px', textAlign: 'center', borderLeft: '0.5px #154480 solid', borderBottom: '1px #154480 solid',background: '#154480' }"
    :cell-style="{color:'#000000'}"

>
    <el-table-column prop="orderNo" label="订单编号" align="center"  />
    <el-table-column prop="examTime" label="申请时间"  align="center" />
    <el-table-column prop="payTime" label="缴费时间" align="center" />
    <el-table-column prop="details" label="缴费明细" align="center" />
    <el-table-column prop="cost" label="费用" align="center" />
    <el-table-column prop="statusName" label="状态" align="center" />
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="showAdmissionNum(scope?.row.id)"  v-if="scope.row.status==1"
          >准考证</el-button
        >
        <el-button link type="primary" size="small" @click="payOrder(scope?.row as OrderParam)"  v-if="scope.row.status==0">支付</el-button>

        <el-button link type="primary" size="small" @click="cancelOrder(scope?.row as OrderParam)"  v-if="scope.row.status==0">取消</el-button>
      </template>
    
    </el-table-column>

    

  </el-table>
  <div class="center-div">
    <el-pagination background layout="prev, pager, next" v-model:current-page="currentPage"
    @current-change="handelCurrentChange" :total="total" />
  </div>
  
</template>
<script setup lang="ts">
import { getOrderList,cancelOrderApi,payOrderApi,showAdmissionNumApi } from "../../api/member/order";
import type { OrderModel,OrderParam,PageParam } from "../../api/member/order";
const orderData=ref<OrderModel[]>([])
const total=ref<number>(0)
const currentPage=ref<number>(1) 
const pageParam=ref<PageParam>({pageNum:currentPage.value,pageSize:10})
onMounted(()=>{
    orderList() 
})
function handelCurrentChange(pageNum: number) {
  pageParam.value.pageNum = pageNum
  orderList()
}
async function showAdmissionNum(id:number){
    const response=await showAdmissionNumApi(id)
    if(response.code===200){
      console.log(response.data,'pdf-------------')
      window.open(response.data.path)
    }
}  
async function orderList(){
  const res=await getOrderList(pageParam.value) 
  if(res.code==200){
    orderData.value=res.data.records??[]
    total.value=res.data.total??0
    currentPage.value=res.data.current??1
  }else{
    ElMessage.error('获取失败')
  }
}
const orderParam=ref<OrderParam>({id:'',status:'',payType:''})
const cancelOrder=async (item:OrderParam)=>{ 
  item.status=2
  const response=await cancelOrderApi(item)
  if(response.code==200){
    ElMessage.success('取消成功')
    orderList()
  }else{
    ElMessage.error('取消失败')
  }
} 
const payOrder=(item:OrderParam)=>{
  orderParam.value=item
  const response=payOrderApi(item)
}

</script>
<style scoped lang='less'>
:deep(.el-form-item__content) {
  justify-content: center;
}

.btn_step {
  margin: 20px 10px 0;
  display: block;
  width: 213px;
  height: 48px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  margin: 30px auto 0;
  background-color: #345aa3;
  cursor: pointer;
}

:deep(.cell) {
  display: flex;
  justify-content: space-evenly;
}
.center-div {
    display: flex;
    justify-content: center;
    margin-top: 20px;

    :deep(.el-pagination.is-background .el-pager li.is-active) {
        background-color: #F9B469
    }
}
</style>